<template>
  <div class="layout-container">
    <div class="layout-container-table">
      <el-row :gutter="20" style="padding: 0 0 10px 0">
        <el-col v-if="post.postId != null" :span="3">
          <el-button size="large" @click="onBack" :icon="Back" plain>返回</el-button>
        </el-col>
        <el-col :span="post.postId != null ? 16 : 19">
          <el-input size="large" v-model="form.title" placeholder="请输入文章标题">
            <template #prepend>文章标题</template>
          </el-input>
        </el-col>
        <el-col :span="5" style="position: absolute; right: 0">
          <el-button size="large" @click="saveDraftForm(form)" plain>保存笔记</el-button>
          <el-button @click="handlePush(form)" size="large" type="primary">保存</el-button>
        </el-col>
      </el-row>
      <v-md-editor v-model="form.content" height="76vh"></v-md-editor>
    </div>
  </div>
  <Layer :layer="layer" @getTableData="getTableData" v-if="layer.show"/>
</template>

<script lang="ts" setup>
import {nextTick, reactive, ref} from "vue";
import VMdEditor from "@kangc/v-md-editor";
import "@kangc/v-md-editor/lib/style/base-editor.css";
import githubTheme from "@kangc/v-md-editor/lib/theme/github.js";
import "@kangc/v-md-editor/lib/theme/style/github.css";
import hljs from "highlight.js";
import {ElMessage} from "element-plus";
import {Back} from "@element-plus/icons";
import {LayerInterface} from "@/components/layer/index.vue";
import Layer from "./layer.vue";

VMdEditor.use(githubTheme, {
  Hljs: hljs,
});
// 弹窗控制器
const layer: LayerInterface = reactive({
  show: false,
  title: "发布",
  showButton: true,
});

const props = defineProps({
  post: {
    type: Object,
    default() {
      return {
        postId: null,
        title: "",
        content: ""
      };
    },
  },
});
const emits = defineEmits(["onBack"]);
let form = ref({
  postId: null,
  title: "",
  content: ""
});
init();

function init() {
  // 用于判断新增还是编辑功能
  if (props.post) {
    form.value = JSON.parse(JSON.stringify(props.post)); // 数量量少的直接使用这个转
  } else {
  }
}

// 保存草稿提交事件
const saveDraftForm = (params: object) => {
  saveByUser(params).then(({data}) => {
    form.value = data
    ElMessage({
      type: "success",
      message: "保存成功",
    });
  });
};
nextTick(() => {

});

const onBack = () => {
  emits("onBack")
}

const getTableData = () => {

}
//发布文章
const handlePush = (data: object) => {
  layer.row = data
  layer.show = true
}

</script>
<style lang="scss" scoped>
* {
  text-align: left;
}

.layout-container {
  background-color: transparent;
  margin: 0;
  width: 100%;
}
</style>